<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="utf-8" />
<title></title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if IE 6]>
<script type="text/javascript" src="js/json2.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> 
<![endif]-->
<style type="text/css">
.cc {
	position: relative;
	overflow: auto;
	width: 400px;
	height: 200px;
	background: #fafafa;
	border: 1px solid #ccc;
}

#dd1 {
	margin: 0px;
	width: 100px;
	height: 100px;
	background: #fff;
	border: 1px solid #ccc;
}

#dd2 {
	width: 100px;
	height: 100px;
	background: #fafafa;
	border: 1px solid #ccc;
	position: absolute;
	left: 600px;
	top: 200px;
}

#dd3 {
	width: 100px;
	height: 100px;
	background: red;
	position: absolute;
	left: 450px;
	top: 200px;
}

#dd4 {
	width: 100px;
	height: 100px;
	background: green;
	position: absolute;
	left: 450px;
	top: 200px;
	/* 	z-index: 2; */
}
</style>
<script src="../jquery-1.7.2.min.js"></script>
<script src="../plugins/agileui.draggable.js"></script>
<script>
	// 	$(function() {
	// 		$('.agileui-draggable').data('draggable', {
	// 			'test' : '123'
	// 		});
	// 		alert($.data($('.agileui-draggable')[0], 'draggable').test);
	// 		$('#dg_1').draggable({

	// 		});
	// 		var a = $('#abc').length;
	// 		alert(a);
	// 		$('#dd3').bind("mousemove.draggable", function(e) {
	// 			console.info('dd3');
	// 		});
	// 		$('#dd4').bind("mousemove.draggable", function(e) {
	// 			console.info('dd4');
	// 		});
	// 		$(document).unbind(".draggable");
	// 	});

	$(function() {
		$('#dd2').draggable();
		$('#dd1').draggable({
			axis : null,
			handle : '#title',
			revert : true
		});
		$('#dd3').draggable();
		$('#dd4').draggable();

	});

	function start() {
		$('#dd1').draggable({
			disabled : false,
			edge : 5
		});
	}
	function stop() {
		$('#dd1').draggable({
			disabled : true
		});
	}
</script>
</head>
<body>
	<h2>Draggable</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>Move below box by clicking on it with mouse.</div>
	</div>
	<div style="margin: 10px 0"></div>

	<div class="cc">
		<div id="dd1">
			<div id="title"
				style="padding: 10px; background: #ccc; margin: 10px; border: solid 1px;">Title</div>
			<a href="#" onclick="start()">Start Drag</a><br /> <a href="#"
				onclick="stop()">Stop Drag</a>
		</div>
	</div>
	<div handle="#title" id="dd2">
		<!-- 		<div id="title" style="padding: 5px; background: #ccc;">Title</div> -->
	</div>
	<div id="dd3"></div>

	<div id="dd4"></div>
</body>
</html>